<template>
<div class="edit">
  <el-form
    ref="ruleFormRef"
    :model="editForm"
    status-icon
    :rules="ruleForm"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="editForm.username"></el-input>
    </el-form-item>
    <el-form-item label="游戏ID" prop="nickname">
      <el-input v-model="editForm.nickname"></el-input>
    </el-form-item>
    <el-form-item label="QQ" prop="qq">
      <el-input v-model="editForm.qq"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="editForm.password"
        type="password"
        autocomplete="off"
        placeholder="不填写默认不更改"
      ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="re_password">
      <el-input
        v-model="editForm.re_password"
        type="password"
        autocomplete="off"
        placeholder="不填写默认不更改"
      ></el-input>
    </el-form-item>
    <el-form-item label="氏族" prop="team">
      <el-radio-group v-model="editForm.team">
        <el-radio-button label="一团"></el-radio-button>
        <el-radio-button label="二团"></el-radio-button>
        <el-radio-button label="三团"></el-radio-button>
        <el-radio-button label="四团"></el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="editForm.sex">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-radio-group v-model="editForm.status">
        <el-radio-button label="正常"></el-radio-button>
        <el-radio-button label="冻结"></el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleFormRef')"
      >Submit</el-button
      >
      <el-button @click="closeTag()">Reset</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { getAdminDetail, editAdmin } from "@/api/admin";
import useCloseTag from "@/hooks/useCloseTag";
import { editUsers, getUsersDetail } from "../../api/users";
import { ElMessage } from "element-plus";

export default {
  name: 'Edit',
  setup() {
    const { closeTag } = useCloseTag()
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      aid: route.params.id,
      ruleFormRef: ref(),
      editForm: {
        id: 0,
        username: '',
        nickname: '',
        password: '',
        re_password: '',
        team: '',
        qq: '',
        sex: '',
        status: '',
        now_pass: '',
      },
      ruleForm: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 99,
            message: '长度在 3 到 99 个字符',
            trigger: 'blur',
          },
        ],
        nickname: [
          { required: true, message: '请输入游戏id', trigger: 'blur' },
          {
            min: 3,
            max: 99,
            message: '长度在 3 到 99 个字符',
            trigger: 'blur',
          },
        ],
        qq: [
          { required: true, message: '请输入qq', trigger: 'blur' },
          {
            min: 4,
            max: 15,
            message: '长度在 4 到 15 个字符',
            trigger: 'blur',
          },
        ],
        team: [
          { required: true, message: '请选择氏族', trigger: 'change' },
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
        authorization: [
          { required: true, message: '请选择角色', trigger: 'change' },
        ],
        password: [],
        re_password: []
      },
    })

    const methods = {
      async getAdminInfo(aid) {
        let resp = await getUsersDetail(aid)
        let info = resp.data.info
        state.editForm = {
          id: info.id,
          username: info.username,
          nickname: info.nickname,
          password: '',
          re_password: '',
          team: info.team,
          qq: info.qq,
          sex: info.sex,
          now_pass: info.password,
          status: info.status,
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let resp = await editUsers(state.editForm)
            if (resp.code !== 200) {
              ElMessage({
                message: resp.message || '服务器错误！',
                type: 'success',
              })
            } else {
              ElMessage({
                message: resp.message || 'ok',
                type: 'success',
              })
              setTimeout(function() {
                store.dispatch('tags/delTag', route)
                router.back()
              },998)
            }
          } else {
            return false
          }
        })
      }
    }
    onMounted(() => {
      methods.getAdminInfo(state.aid)
    })
    return {
      ...toRefs(state),
      ...methods,
      closeTag,
    }
  },
}
</script>

<style scoped>

</style>